<template>
	<view class="topic-box">
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="topic-item" v-for="(item,i) in list" :key="i">
			<view class="topic-item-t">
				<view class="topic-item-row">
					<span class="topic-tag">话题</span>
					<view class="name">#{{item.name}}</view>
				</view>
				<view class="topic-desc">{{item.description}}</view>
				<image v-if="item.images" :src="item.pic" @click="takeDiscussion(item)" class="topic-img" mode="aspectFill"></image>
			</view>
			<view class="topic-item-b">
				<view class="item-btm-l">{{item.onLookers}}人围观</view>
				<view class="item-btm-r" @click="takeDiscussion(item)">参与讨论</view>
			</view>
		</view>
		</mescroll-body>
	</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onPageScroll, onReachBottom } from "@dcloudio/uni-app"
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
import { topicsPages } from '@/common/API/member'
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom)

const list = ref<any>([])
const upCallback = async (mescroll)=>{
	let data = {
		pageNo: mescroll.num,
		pageSize: mescroll.size
	}
	let res = await topicsPages(data)
	if(res.list&&res.list.length){
		res.list.map(item=>{
			item.pic = item.images.split(',')[0]
		})
	}
	let curPageData = res.list || [];
	console.log(curPageData)
	let curPageLen = curPageData.length;
	if(mescroll.num == 1) list.value = [];
	list.value = list.value.concat(curPageData);
	mescroll.endSuccess(curPageLen);
}

const resetScroll = ()=>{
	list.value = [];
	downCallback()
}

//参与讨论
const takeDiscussion = (item) => {
	uni.navigateTo({
		url: `/pages/personal/topic/detail?id=${item.id}&onLookers=${item.onLookers}`
	})
}
</script>
<style lang="scss" scoped>
	.topic-box{
		padding-bottom: 20rpx;
		.topic-item{
			padding: 32rpx;
			border-radius: 8rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 16rpx  rgba(0, 0, 0, 0.08);
			margin: 32rpx;
		}
		.topic-img{
			width: 624rpx;
			height: 352rpx;
		}
		.topic-item-t{
			border-bottom: 1px solid rgba(229, 229, 229, 1);
			.topic-tag{
				background: rgba(253, 150, 24, 1);
				padding: 2rpx 20rpx;
				color: #fff;
				font-size: 30rpx;
				transform: scale(0.7);
				margin-left: -14rpx;
				border-radius: 8rpx;
				width: 88rpx;
				text-align: center;
				line-height: 48rpx;
			}
			.topic-item-row{
				display: flex;
				align-items: flex-start;
				&>view{
					color: rgba(0, 0, 0, 1);
				}
				.name{
					line-height: 48rpx;
				}
			}
			.topic-desc{
				color: rgba(153, 153, 153, 1);
				padding: 10rpx 0 18rpx;
				font-size: 28rpx;
			}
		}
		.topic-item-b{
			display: flex;
			justify-content: space-between;
			padding-top: 24rpx;
			.item-btm-l{
				color: rgba(153, 153, 153, 1);
			}
			.item-btm-r{
				color: rgba(253, 150, 24, 1);
			}
		}
	}
</style>
